<template>
  <div class="page">
    <heads></heads>
    <div class="page-content" style="width: 100%;padding-bottom:0">
      
        <mt-tab-container v-model="selected">
          <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}">
            <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
              <ul class="mins" style="min-height:380px;">
                <div  v-if="pageList.length==0" class="noList">
                  暂无相关数据
                </div>
                <li  v-if="pageList"  v-for="(val, key) in pageList">
                  <div class="dataList">
                    <div>
                      <div class="type">{{val.theme}}<span style="float:right;padding-right:15px;font-size:13px;">{{val.stateStr}}</span></div>
                      <div class="title">
                        <div class="default">{{val.title}}</div>
                      </div>
                    </div>

                    <ul class="betOn">
                      <li v-for="(item, keys) in val.quizItems" @click="modelBottomShow(item.content,item.odds,item.id)">
                        <span>{{item.content}}</span>
                        <span class="odds">
                                <span>赔率{{item.odds}} </span>
                                <span class="rtjiant"></span>
                              </span>
                      </li>
                    </ul>

                    <div class="timeOut">
                      <span class="iconTime"></span>
                      <span class="txtTime">投注截止时间：{{val.endTimeStr}}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </mt-loadmore>
          </div>
        </mt-tab-container>
    
      <mt-popup v-model="modeBottom" v-if="modeBottom"  popup-transition="popup-fade" class="mint-popup-4" position="bottom" style="width:100%;">
        <div class="bottomDilog">
          <div class="dialog-header">
            <span>{{isOdd}}</span>
            <span>赔率{{loss}}</span>
          </div>
          <div class="dialog-body">
            <div class="dialog-body-money">
              <div @click="clickMoneys(index,itemMoney)" v-bind:class="{active:index==guigeSpan}"  v-for="itemMoney ,index in moneyList"><span>{{itemMoney}}</span></div>
            </div>
            <div class="dialog-body-text">
              <span>猜中赢</span><span class="dialog-money"></span>{{a}}<span>竞猜豆</span>
            </div>
          </div>
          <div class="dialog-footer">
            <mt-button class="btn" @click="betMoney()">立即投注</mt-button>
          </div>
        </div>
      </mt-popup>
    </div>
  </div>
</template>
<script>
  import heads from '../components/header'
  import dateillist from '../components/dateillist.vue'
  import { Loadmore,Toast ,MessageBox } from 'mint-ui';
  import api from '../axios/api'
  import MtButton from "../../node_modules/mint-ui/packages/button/src/button";
  export default {
    data() {
      return {
        selected: '1',
        searchCondition: {  //分页属性
          pageNo:1,
          pageSize: 15
        },
        pageList: [],
        allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
        scrollMode: "auto", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
        modeBottom:false,
        moneyList:[],
        activeMoney:'',
        guigeSpan:"0",
        isOdd:'',
        loss:'',
        profit:'',
        ItemId:'',
        types:this.$route.query.id
      }

    },
    components: {
      MtButton,
      'v-loadmore': Loadmore  // 为组件起别名，vue转换template标签时不会区分大小写，例如：loadMore这种标签转换完就会变成loadmore，容易出现一些匹配问题
      // 推荐应用组件时用a-b形式起名
    },
    mounted() {

      this.loadPageList();  //初次访问查询列表
    },
    methods: {
      //金额选项
      clickMoneys:function (index,c) {
        this.guigeSpan = index;
        this.activeMoney=c;
      },
      modelBottomShow:function (a,b,id) {
        this.modeBottom=true;
        this.isOdd=a;
        this.loss=b;
        this.ItemId=id;
        //console.log(this.ItemId)
      },
      betMoney:function () {
        this.modeBottom=false;
        const _this=this
        MessageBox.confirm('',{
          message: '确认竞猜',
          //title: '确认竞猜',
        }).then(action => {
          this.$http(this.API.join,{data:{quizItemId:this.ItemId,invest:this.activeMoney}}).then(function(res) {
            Toast({
              message: res.message,
              iconClass: 'icon'+res.flag==1?'icon-success':'icon-error',
              duration: 1000
            });
            // _this.loadPageList();  //初次访问查询列表
          }).catch(function(err) {
            console.log(err);
          });
        },()=>{//取消
          //alert(87)
        });
      },

      loadTop: function() { //组件提供的下拉触发方法
        //下拉加载
        this.loadPageList();
        this.$refs.loadmore.onTopLoaded();// 固定方法，查询完要调用一次，用于重新定位
      },
      loadBottom: function() {
        // 上拉加载
        this.more();// 上拉触发的分页查询
        this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位
      },
      loadPageList: function() {
        var _this=this;
        _this.searchCondition.pageNo=1;
        this.$http(this.API.qucaiList,{
          data:{length:_this.searchCondition.pageSize,
            page:_this.searchCondition.pageNo,
            type:_this.types
          }
        }).then(function(res) {
         // console.log(res)
          _this.pageList=res.list;
          _this.isHaveMore(false);

          if(res.userInfo){
            const eva=eval("("+res.userInfo+")")
            _this.$store.state.moneys=eva.coin;
          }

          _this.moneyList=res.message.split(',');
//          console.log(res.message)
          _this.activeMoney=_this.moneyList[0]
          _this.$nextTick(function() {
            _this.scrollMode = "touch";
          });
        }).catch(function(err) {
          console.log(err);
        });
      },
      more: function() {
        // 分页查询
        var _this=this;
        _this.searchCondition.pageNo = parseInt(_this.searchCondition.pageNo) + 1;
        this.$http(this.API.qucaiList,{
          data:{length:_this.searchCondition.pageSize,
            page:_this.searchCondition.pageNo,
            type:_this.types
          }
        }).then(function(res) {
          _this.pageList =_this.pageList.concat(res.list);
          if(res.list.length<1){
            _this.isHaveMore(true);
            Toast({
              message: '没有更多',
              position: 'bottom',
              duration: 5000
            });
          }
        }).catch(function(err) {
          console.log(err);
        });

      },
      isHaveMore: function(isHaveMore) {
        // 是否还有下一页，如果没有就禁止上拉刷新
        this.allLoaded = false; //true是禁止上拉加载
        //console.log(isHaveMore)
        if (isHaveMore) {
          this.allLoaded = true;
        }
      },
    },
    components: {
      heads
    },
    computed:{
      a(){
        return this.activeMoney*this.loss
      }
    }

  }
</script>
<style>
  @import '../sass/transition/data.scss';
</style>

